<template>
    <div class="shopcar">
        <!-- 商品展示 -->
        <div class="mui-card" v-for="(item,i) in shopinfo" :key="item.id">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <!--  -->
                    <div class="mui-input-row mui-checkbox">
                        <input type="checkbox" :checked="$store.getters.getSelectCount[item.id]" @click="changeCheck(item.id)">
                    </div>
                    <img :src="item.thumb_path">
                    <div class="info">
                        <p class="info-item">
                            <span>{{item.title}}</span>
                            <span>￥{{item.sell_price}}</span>
                        </p>
                        <div class="info-item">
                            <i @click="deletCar(item.id,i)">删除</i>
                            <!-- 传递state中的数量id对应的数量，商品id给子组件 -->
                            <numbox :initCount="$store.getters.getGoodsCount[item.id]" :goodsId="item.id"></numbox>
                        </div>
                    </div>
                    <!--  -->
                </div>
            </div>
        </div>
        <!-- 结算部分 -->
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner result">
                    <span>总价(不含运费)：￥{{$store.getters.getSelectMsg.price}}</span>
                    <span>共 {{$store.getters.getSelectMsg.count}} 件</span>
                    <mt-button size="small" type="danger" plain="true" @click="alertmsg">去结算</mt-button>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
import { Toast } from 'mint-ui';
import numbox from '../subcomponents/goodslist_numbox.vue';

export default {
    data() {
        return {
            shopinfo: []
        }
    },
    methods: {
        // 获取当前购物车中商品id集合，发起请求获取信息
        getShopInfo(){
            let i = [];
            this.$store.state.list.forEach(item => {
                i.push(item.id);
            })
            if(i.length <= 0){
                return;
            }else{
                this.$http.get('api/goods/getshopcarlist/' + i.join(',')).then(res => {
                    this.shopinfo = res.body.message;
                })
            }
        },
        // 点击向state中传递被删除的商品id，删除store中的对应值；另外i表示shopinfo数组中的标识符，删除当前数组中的值
        // 此时删除了store中的值，没有再次进行渲染，只是对当前数组进行修改，下次进入页面时再次渲染被修改的值
        deletCar(id,i){
            this.$store.commit('deletCar',id);
            this.shopinfo.splice(i,1);
        },
        // 点击修改是否选中
        changeCheck(id){
            this.$store.commit('selectShops',id)
        },
        // 点击弹窗
        alertmsg(){
            Toast('暂不支持')
        }
    },
    created() {
        this.getShopInfo();
    },
    components: {
        numbox: numbox
    }
}
</script>

<style lang="css">
    .mui-checkbox, .mui-radio{
        display: flex;
        align-items: center;
    }
    .shopcar .mui-checkbox input[type=checkbox], .mui-radio input[type=radio]{
        position: static;
        width: 24px;
        height: 24px;
    }
    .shopcar .mui-card-content-inner{
        display: flex;
        justify-content: space-between;
    }
    .shopcar .mui-card-content-inner img{
        width: 55px;
        height: 55px;
    }
    .shopcar .mui-checkbox input[type=checkbox]:before, .mui-radio input[type=radio]:before{
        font-size: 24px;
    }
    .shopcar .mui-numbox{
        height: 25px;
    }
    .shopcar .info{
        width: 55vw;
    }
    .shopcar .info-item{
        display: flex;
        justify-content: space-between;
    }
    .shopcar p.info-item span:first-child{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .shopcar .info-item i{
        color: red;
        font-style: normal;
    }
    .shopcar .result span{
        color: rgb(56, 56, 56);
        line-height: 25px;
    }
    .shopcar .result button{
        height: 25px;
    }
</style>